<template>
    <div>
        <ul>
            <li :style="{ opacity: opacity }">欢迎学习Vue</li>
            <li>新闻001<input type="text"></li>
            <li>新闻002<input type="text"></li>
            <li>新闻003<input type="text"></li>
        </ul>
    </div>
</template>
<script>
import Vue from 'vue';
export default Vue.extend({
    name: 'News',
    data() {
        return {
            opacity: 1,
        }
    },
    /* mounted + beforeDestroy 方式 运行+清除 定时器时，这个组件如果被路由缓存，那么它会一直执行而清除不掉。
    mounted() {
        this.timer = setInterval(() => {
            console.log("@定时器一直在执行");
            this.opacity -= 0.1;
            if (this.opacity <= 0) this.opacity = 1;
        }, 100);
    },
    beforeDestroy() {
        console.log("News组件即将被销毁");
        clearInterval(this.timer)
    }, */
    activated() {
        this.timer = setInterval(() => {
            console.log("@定时器一直在执行");
            this.opacity -= 0.1;
            if (this.opacity <= 0) this.opacity = 1;
        }, 100);
    },
    deactivated() {
        console.log("News组件失活了");
        clearInterval(this.timer);
    },
}) 
</script>